<template>
	<div class="goodsItem">
		<CustomDialog
			:title="state.dialog.title"
			v-model:visible="state.dialog.isShowDialog"
			dialogWidth="900px"
			@close="handleClose"
			:dialogFooterBtn="false"
		>
			<div class="add-container">
				<el-form :model="state.ruleForm" ref="commentRef" label-width="100px">
					<el-form-item label="评价内容" prop="content" :rules="{ required: true, message: '请输入评价内容', trigger: 'blue' }">
						<el-input v-model="state.ruleForm.content" type="textarea" :rows="2" placeholder="请输入评价内容"></el-input>
					</el-form-item>
					<el-form-item label="评价图片">
						<div class="goods-image flex">
							<div v-for="(image, index) in state.ruleForm.images" :key="index">
								<el-image :src="STATIC_URL + image" fit="cover" class="image" />
								<div class="goods-delete" @click="deleteImage(index)">
									<SvgIcon name="ele-DeleteFilled"></SvgIcon>
								</div>
							</div>
							<el-icon @click="choiceFileImage">
								<ele-Plus />
							</el-icon>
						</div>
					</el-form-item>

					<el-form-item label="评价星级" prop="level">
						<el-rate v-model="state.ruleForm.level" :max="5" />
					</el-form-item>

					<el-form-item label="评价用户" prop="username" :rules="{ required: true, message: '请选择用户', trigger: 'blue' }">
						<el-button type="primary" plain size="small" @click="choiceUser" text v-if="state.ruleForm.nickname == ''">选择用户</el-button>

						<div class="sd-flex" v-else>
							<div style="color: rgba(162, 155, 254, 1)">{{ state.ruleForm.nickname }}</div>
							<div>
								<el-button type="primary" plain size="small" @click="deleteUser" text>删除用户</el-button>
							</div>
						</div>
					</el-form-item>

					<el-form-item label="商品选择" prop="goodsId" :rules="{ required: true, message: '请选择商品', trigger: 'blue' }">
						<div class="image">
							<el-image v-if="state.ruleForm.goodsImage != ''" :src="STATIC_URL + state.ruleForm.goodsImage" fit="cover" class="image" />
							<el-icon v-else @click="choiceItem">
								<ele-Plus />
							</el-icon>
							<div class="image-delete" @click="deleteGoods" v-if="state.ruleForm.goodsImage != ''">
								<SvgIcon name="ele-DeleteFilled"></SvgIcon>
							</div>
						</div>
						<div class="ml5" style="color: rgba(162, 155, 254, 1)">{{ state.ruleForm.goodsTitle }}</div>
					</el-form-item>

					<el-form-item label="显示状态">
						<el-radio-group v-model="state.ruleForm.showd">
							<el-radio :label="1">显示</el-radio>
							<el-radio :label="0">隐藏</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-form>
			</div>
			<footer class="footer--submit">
				<el-button type="primary" @click="onSubmit(commentRef)" size="default">{{ state.dialog.submitTxt }}</el-button>
			</footer>
		</CustomDialog>

		<FileChoice ref="FileChoiceRef" @choiceFile="choiceFileData"></FileChoice>
		<ItemChoice ref="ItemChoiceRef" @choice="choiceItemData"></ItemChoice>
		<FakeUserChoice ref="FakeUserChoiceRef" @choiceUser="choiceUserData"></FakeUserChoice>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref, defineProps, defineAsyncComponent } from 'vue';
import { STATIC_URL } from '/@/utils/config';
import { type FormInstance } from 'element-plus';
import { goodsCommentApi } from '/@/api/goods/comment/index';
import messageUtils from '/@/utils/messageUtils';
const FileChoice = defineAsyncComponent(() => import('/@/views/file/choice/index.vue'));
const ItemChoice = defineAsyncComponent(() => import('/@/views/goods/goods/choice/index.vue'));
const FakeUserChoice = defineAsyncComponent(() => import('/@/views/shop/data/fakeuser/choiceDialog.vue'));
const FileChoiceRef = ref();
const ItemChoiceRef = ref();
const commentRef = ref();
const FakeUserChoiceRef = ref();

const state = reactive({
	ruleForm: {
		content: '',
		images: [],
		level: 5,
		username: '',
		nickname: '',
		goodsId: '',
		goodsImage: '',
		price: '',
		quantity: '',
		showd: 1,
		avatar: '',
		goodsTitle: '',
		userId: '',
	},
	dialog: {
		isShowDialog: false,
		title: '添加',
		submitTxt: '添加虚拟评价',
	},
	form: {},
});

const emits = defineEmits(['refresh']);
const handleClose = () => {
	state.dialog.isShowDialog = false;
};

const reset = () => {
	state.ruleForm.goodsTitle = '';
	state.ruleForm.images = [];
	state.ruleForm.price = '';
	state.ruleForm.quantity = '';
	state.ruleForm.nickname = '';
	state.ruleForm.content = '';
	state.ruleForm.goodsImage = '';
	state.ruleForm.showd = 1;
	state.ruleForm.level = 5;
};

const onSubmit = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate(async (valid) => {
		if (valid) {
			try {
				await goodsCommentApi().create(state.ruleForm);
				emits('refresh');
				handleClose();
				messageUtils().success('操作成功');
				reset();
			} catch (e) {
				messageUtils().error('操作失败，请重试');
			}
		}
	});
};
const open = () => {
	state.dialog.isShowDialog = true;
};

const choiceUser = () => {
	FakeUserChoiceRef.value.open();
};

const choiceUserData = (fakeUser: FakeUser) => {
	console.log('choiceUserData: ', fakeUser);
	state.ruleForm.username = fakeUser.username;
	state.ruleForm.avatar = fakeUser.avatar;
	state.ruleForm.nickname = fakeUser.nickname;
	state.ruleForm.userId = fakeUser.userId;
};

const deleteUser = () => {
	state.ruleForm.username = '';
	state.ruleForm.avatar = '';
	state.ruleForm.nickname = '';
	state.ruleForm.userId = '';
};

const choiceItem = () => {
	ItemChoiceRef.value.openDialog();
};

const choiceItemData = (item: ChoiceGoodsItem) => {
	console.log('choiceItemData: ', item[0]);

	state.ruleForm.goodsImage = item[0].image;
	state.ruleForm.goodsTitle = item[0].title;
	state.ruleForm.goodsId = item[0].id;
};

const deleteGoods = () => {
	state.ruleForm.goodsImage = '';
	state.ruleForm.goodsId = '';
	state.ruleForm.goodsTitle = '';
};

const choiceFileImage = () => {
	FileChoiceRef.value.openFileChoiceDialog();
};

const choiceFileData = (file: ChoiceFileInfo[]) => {
	console.log('file: ', file[0]);
	for (let i = 0; i < file.length; i++) {
		state.ruleForm.images.push(file[i].visitRelativePath);
	}
};

const deleteImage = (index: number) => {
	console.log('index: ', index);
	state.ruleForm.images.splice(index, 1);
};
defineExpose({ open });
</script>

<style scoped lang="scss">
.add-container {
	padding: 20px;
}

.upload-box {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	padding: 10px;
	text-align: center;
}

.upload-box:hover {
	border-color: #409eff;
}

.dialog-footer {
	display: flex;
	justify-content: flex-end;
}

.footer--submit {
	width: 100%;
	--el-footer-height: auto !important;
	padding: 7px 16px !important;
	border-top: 1px solid #d9d9d9;
	text-align: right !important;
}

.image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	width: 50px;
	cursor: pointer;
	border: 1px dashed var(--el-border-color-darker);
	position: relative;

	.el-icon {
		width: 50px;
		height: 50px;
		border: 1px dashed #dcdfe6;
		border-radius: 4px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		font-size: 24px;
		color: #909399;
		transition: all 0.3s;
		&:hover {
			border-color: #409eff;
			color: #409eff;
		}
	}
}

.image:hover .image-delete {
	display: flex;
}

.goods-image {
	display: flex;
	// flex-wrap: wrap;
	gap: 5px;

	> div {
		position: relative;
		width: 50px;
		height: 50px;
		border-radius: 4px;
		overflow: hidden;
		border: 1px solid #dcdfe6;

		.image {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.goods-delete {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			display: flex;
			align-items: center;
			justify-content: center;
			opacity: 0;
			transition: opacity 0.3s;
			cursor: pointer;

			.svg-icon {
				color: #fff;
				font-size: 20px;
			}

			&:hover {
				opacity: 1;
			}
		}
	}

	.el-icon {
		width: 50px;
		height: 50px;
		border: 1px dashed #dcdfe6;
		border-radius: 4px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		font-size: 24px;
		color: #909399;
		transition: all 0.3s;
		&:hover {
			border-color: #409eff;
			color: #409eff;
		}
	}
}
</style>
